<template>
  <transition name="slide-up">
    <view v-if="show" class="filter-popup">
      <view class="arrow-double-down-icon" @click="close" />
      <view class="filter-content">
        <view class="filter-title">
          <view class="title-line-green" />
          <text>排序</text>
        </view>
        <view class="sort-cards">
          <view v-for="(sortItem, idx) in sortList" :key="idx" class="sort-card"
            :class="currentSort === idx ? 'sort-card-active' : ''" @click="selectSort(idx)">
            <text class="sort-text">
              {{ sortItem }}
            </text>
            <image v-if="currentSort === idx" class="check-icon" src="@/static/images/check.png" />
          </view>
        </view>

        <view class="filter-title">
          <view class="title-line-blue" />
          <text>筛选</text>
        </view>
        <view v-for="(option, i) in filterOptions" :key="i" class="filter-row">
          <text class="filter-label">
            {{ option.label }}
          </text>
          <view class="option-group">
            <view v-for="(btn, j) in option.btns" :key="j" class="option-btn"
              :class="btn.active ? 'option-btn-active' : ''" @click="toggleOption(i, j)">
              {{ btn.text }}
            </view>
          </view>
        </view>
        <view class="filter-footer">
          <button class="reset-btn" @click="onReset">
            重置
          </button>
          <button class="confirm-btn" @click="onConfirm">
            确定
          </button>
        </view>
      </view>
    </view>
  </transition>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, ref } from 'vue';

const props = defineProps({
  show: Boolean,
  sortList: Array,
  currentSort: Number,
  filterOptions: Array,
});

const emit = defineEmits(['update:show', 'confirm', 'reset', 'selectSort', 'toggleOption']);

function close() {
  emit('update:show', false);
}

function selectSort(idx: number) {
  emit('selectSort', idx);
}

function toggleOption(i: number, j: number) {
  emit('toggleOption', i, j);
}

function onReset() {
  emit('reset');
}

function onConfirm() {
  emit('confirm');
}
</script>

<style scoped>
.filter-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease-in-out;
}

.slide-up-enter {
  transform: translateY(100%);
}

.slide-up-leave-to {
  transform: translateY(100%);
}

.filter-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.arrow-double-down-icon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto;
  margin-top: 10rpx;
  background: url("@/static/images/arrow-double-down.png") no-repeat center;
  background-size: contain;
}

.filter-content {
  padding: 20rpx;
}

.filter-title {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.title-line-green {
  width: 6rpx;
  height: 32rpx;
  background-color: #07c160;
  margin-right: 10rpx;
  border-radius: 2rpx;
}

.title-line-blue {
  width: 6rpx;
  height: 32rpx;
  background-color: #007aff;
  margin-right: 10rpx;
  border-radius: 2rpx;
}

.sort-cards {
  margin-bottom: 20rpx;
}

.sort-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.25);
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.sort-card-active {
  background: #43cf7c;
  box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.25);
}

.sort-text {
  font-size: 24rpx;
  color: #333;
}

.check-icon {
  width: 26rpx;
  height: 26rpx;
  margin-left: 10rpx;
}

.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.filter-label {
  font-size: 24rpx;
  color: #333;
}

.option-group {
  display: flex;
}

.option-btn {
  border: 1rpx solid #07c160;
  border-radius: 6rpx;
  padding: 4rpx 14rpx;
  font-size: 24rpx;
  color: #07c160;
  margin-left: 20rpx;
}

.option-btn-active {
  background-color: #07c160;
  color: #fff;
}

.filter-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.reset-btn {
  width: 45%;
  text-align: center;
  background-color: #fff;
  border: 1rpx solid #ff8c00;
  color: #ff8c00;
  font-size: 24rpx;
  padding: 12rpx 0;
  border-radius: 8rpx;
}

.confirm-btn {
  width: 45%;
  text-align: center;
  background-color: #07c160;
  color: #fff;
  font-size: 24rpx;
  padding: 12rpx 0;
  border-radius: 8rpx;
}
</style>
